<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Title</title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>

    <script th:inline="javascript">
        /*function del(val) {
            $.ajax({
                type:"post",
                asunc:false,
                url:"/person/delete",
                data:{id:val},
                success:function (msg) {
                    alert("进入ajax success "+ msg);

                    if (msg=='success'){}
                        alert("进入if "+ msg);
                        console.log(msg);
                        $(this).parent().parent().remove();
                },
                error:""

            });
        }*/


        function add() {
            $.ajax({
                type:"post",
                async:false,
                url:"/person/add",
                data:{},
                success: function () {
                    parent.location.reload();
                },
                error:"er"
            });
        }
    </script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    ...
</nav>


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active">
                        <a href="#">Overview</a>
                    </li>
                    <li>
                        <a href="#">Reports</a>
                    </li>
                    <li>
                        <a href="#">Analytics</a>
                    </li>
                </ul>
            </div>

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <!--
                                <h1 class="page-header">DashBoard</h1>
                                <div class="row placeholders">

                                </div>-->

                <h2 class="sub-header">Scetion title</h2>
                <button th:onclick="'add()'">增加</button>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <th>#</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>操作</th>
                        </thead>
                        <tbody >
                            <tr th:each="person:${name}" >
                                <td><input type="checkbox" /></td>
                                <td th:text="${person.name}">haha</td>
                                <td th:text="${person.age}">hehe</td>
                                <!--<td><a th:attr="href=@{/person/delete?id=} +${person.id}">删除</a></td>-->
                                <td class="deleteD" th:value="${person.id}">
                                    <button>删除</button>
                                </td>
                            </tr>


                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>


</body>
<script th:src="@{jquery-1.11.0.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    $('.deleteD').on('click',function(){
        var self = this;
        var value = $(self).attr("value");
        $.ajax({
            type:"post",
            asunc:false,
            url:"/person/delete",
            data:{id:value},
            success:function (msg) {
                if (msg=='success'){}
                $(self).parent('tr').remove();
            }
        });
    });
//    $('.deleteD').on('click',function(){
//        $(this).parent('tr').remove();
//    });
</script>
</html>